﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Border Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function changeUrl(vPageName) {
            var vIfr = document.getElementById("ifrObj");
            vIfr.src = vPageName;
        }
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA;
        padding: 10px">
        jquery-easyui-1.3.1</div>
    <div data-options="region:'west',split:true,title:'index'" style="width: 200px; padding: 10px;">
        <ul>
            <li onclick="changeUrl('accordion.html');">accordion.html </li>
            <li onclick="changeUrl('calendar.html');">calendar.html </li>
            <li onclick="changeUrl('combo.html');">combo.html </li>
            <li onclick="changeUrl('combobox.html');">combobox.html </li>
            <li onclick="changeUrl('combogrid.html');">combogrid.html </li>
            <li onclick="changeUrl('combotree.html');">combotree.html </li>
            <li onclick="changeUrl('datagrid.html');">datagrid.html </li>
            <li onclick="changeUrl('datagrid2.html');">datagrid2.html </li>
            <li onclick="changeUrl('datagrid3.html');">datagrid3.html </li>
            <li onclick="changeUrl('datagrid4.html');">datagrid4.html </li>
            <li onclick="changeUrl('datagrid5.html');">datagrid5.html </li>
            <li onclick="changeUrl('datebox.html');">datebox.html </li>
            <li onclick="changeUrl('datetimebox.html');">datetimebox.html </li>
            <li onclick="changeUrl('dialog.html');">dialog.html </li>
            <li onclick="changeUrl('draggable.html');">draggable.html </li>
            <li onclick="changeUrl('droppable.html');">droppable.html </li>
            <li onclick="changeUrl('droppable1.html');">droppable1.html </li>
            <li onclick="changeUrl('droppable2.html');">droppable2.html </li>
            <li onclick="changeUrl('easyloader.html');">easyloader.html </li>
            <li onclick="changeUrl('form.html');">form.html </li>
            <li onclick="changeUrl('layout.html');">layout.html </li>
            <li onclick="changeUrl('layout1.html');">layout1.html </li>
            <li onclick="changeUrl('layout2.html');">layout2.html </li>
            <li onclick="changeUrl('linkbutton.html');">linkbutton.html </li>
            <li onclick="changeUrl('menu.html');">menu.html </li>
            <li onclick="changeUrl('menubutton.html');">menubutton.html </li>
            <li onclick="changeUrl('messager.html');">messager.html </li>
            <li onclick="changeUrl('numberbox.html');">numberbox.html </li>
            <li onclick="changeUrl('numberbox2.html');">numberbox2.html </li>
            <li onclick="changeUrl('numberspinner.html');">numberspinner.html </li>
            <li onclick="changeUrl('pagination.html');">pagination.html </li>
            <li onclick="changeUrl('panel.html');">panel.html </li>
            <li onclick="changeUrl('panel2.html');">panel2.html </li>
            <li onclick="changeUrl('progressbar.html');">progressbar.html </li>
            <li onclick="changeUrl('propertygrid.html');">propertygrid.html </li>
            <li onclick="changeUrl('resizable.html');">resizable.html </li>
            <li onclick="changeUrl('searchbox.html');">searchbox.html </li>
            <li onclick="changeUrl('slider.html');">slider.html </li>
            <li onclick="changeUrl('splitbutton.html');">splitbutton.html </li>
            <li onclick="changeUrl('tabs.html');">tabs.html </li>
            <li onclick="changeUrl('tabs_href_test.html');">tabs_href_test.html </li>
            <li onclick="changeUrl('timespinner.html');">timespinner.html </li>
            <li onclick="changeUrl('tree.html');">tree.html </li>
            <li onclick="changeUrl('tree2.html');">tree2.html </li>
            <li onclick="changeUrl('treegrid.html');">treegrid.html </li>
            <li onclick="changeUrl('treegrid2.html');">treegrid2.html </li>
            <li onclick="changeUrl('treegrid3.html');">treegrid3.html </li>
            <li onclick="changeUrl('validatebox.html');">validatebox.html </li>
            <li onclick="changeUrl('window.html');">window.html </li>
        </ul>
    </div>
    <div data-options="region:'center',title:'Main Title'" style="overflow: hidden">
        <iframe id="ifrObj" name="ifrObj" width="100%;" height="100%;" frameborder="0"></iframe>
    </div>
</body>
</html>
